<template>
  <div class="home">
    <div class="ipt-box">
      <input type="text" v-model="name"><button @click="add">添加</button>
    </div>
    <div class="content-box">
      <ul class="tabs">
        <li @click="changeCur(0)" :class="cur === 0 ? 'active' : ''">书籍</li>
        <li @click="changeCur(1)" :class="cur === 1 ? 'active' : ''">电影</li>
        <li @click="changeCur(2)" :class="cur === 2 ? 'active' : ''">游戏</li>
        <li @click="changeCur(3)" :class="cur === 3 ? 'active' : ''">综艺</li>
        <li @click="changeCur(4)" :class="cur === 4 ? 'active' : ''">体育</li>
      </ul>
      <span @click="sortFn">时间排序</span>
      <transition name="fade">
        <component :is="com"></component>
      </transition>
      
    </div>
  </div>
</template>

<script>
import Books from '@/views/Books'
import Movies from '@/views/Movies'
import { useStore } from 'vuex'
import { computed, ref } from 'vue'
export default {
  name: 'Home',
  components: {
    Books,
    Movies
  },

  setup() {
    let store = useStore()
    let name = ref('')
    let com = ref('books') 
    let sortFlag = false
    return {
      name,
      com,
      cur: computed(() => store.state.cur),
      list: computed(() => store.state.data),
      changeCur: (i) => {
        store.commit('changeCur', i)
        switch(i) {
          case 0:
            com.value = 'books'
          break
          case 1:
            com.value = 'movies'
          break
        }
      },
      add: () => store.commit('dataAdd', name),

      

      sortFn() {
        sortFlag = !sortFlag
        store.state.data.sort((a, b) => {
          if(sortFlag) {
            return a.id - b.id
          }  else {
            return b.id - a.id
          }
          
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    width: 1000px;
    margin: 100px auto;
    background-color: #eee;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .ipt-box {
    text-align: center;
  }
  .content-box {
    margin-top: 30px;
  }
  .tabs {
    display: flex;
    margin-bottom: 20px;
    li {
      flex-basis: 100px;
      line-height: 50px;
      text-align: center;
      background-color: rgb(108, 167, 19);
    }
    .active {
      color: #fff;
      background-color: blue;
    }
  }
  // enter-from 表示动画进入的初始状态的类名
  // leave-to 表示动画离开的末尾状态的类名
  .fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: scale(0);
  }
  // enter-active 表示动画进入的过程状态类名
  // leave-active 动画离开时的过渡类名
  .fade-enter-active, .fade-leave-active {
    transition: all 1s linear;
  }
</style>
